import React, { Component } from 'react';
import { ScrollView, Text, View, StyleSheet, TextInput } from 'react-native';
import { colors, sizes } from 'bee/themes';
import { px2dp } from 'bee/utils/px2dp';
import Switch from 'bee/components/Switch';
import { NOTES } from 'bee/constants';
import { NormalText, SubText } from './InputWithTitle';

// @flow
type Props = {
  title?: string,
  text?: string,
  hasSubText?: boolean,
  headerRight: Element,
  details?: string,
  selected?: boolean,
  changeDetails?: Function,
  changeSelected?: Function,
  children?: Element,
};
export default class DutyItem extends Component<Props> {
  render() {
    const {
      text,
      hasSubText,
      selected,
      title,
      headerRight,
      changeDetails,
      changeSelected,
      details,
    } = this.props;

    const style = selected !== false ? { justifyContent: 'flex-start' } : {};

    return (
      <View style={styles.noteCon}>
        {title && <Text style={styles.noteTitleText}>{title}</Text>}
        {/* <Text>{JSON.stringify(details)}</Text> */}
        {/* <Text>{JSON.stringify(selected)}</Text> */}
        <View style={styles.noteContentView}>
          <View style={[styles.noteContent, style]}>
            <View style={styles.dutyView}>
              {
                <View
                  style={
                    headerRight
                      ? {
                          flexDirection: 'row',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                        }
                      : {}
                  }
                >
                  <NormalText text={text} />
                  {headerRight}
                </View>
              }

              {hasSubText && <SubText text={NOTES.subText} />}
            </View>
            {selected !== undefined && (
              <View style={styles.switchView}>
                <Switch
                  value={selected}
                  onValueChange={value => {
                    changeSelected(value);
                    if (!value) changeDetails('');
                  }}
                />
              </View>
            )}
          </View>
          {selected && (
            <View>
              <Text style={styles.informContent}>{NOTES.textinputTitle}</Text>
              <TextInput
                numberOfLines={4}
                placeholder={NOTES.informDetails}
                value={details}
                onChangeText={value => {
                  changeDetails(value);
                }}
                style={styles.textinput}
                underlineColorAndroid="transparent"
              />
            </View>
          )}
          {this.props.children}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  noteCon: {
    marginHorizontal: px2dp(30),
    borderRadius: px2dp(20),
    borderColor: colors[1104],
    // borderWidth: StyleSheet.hairlineWidth,
    borderWidth: px2dp(1),
    marginBottom: px2dp(20),
  },
  noteTitleText: {
    height: px2dp(70),
    textAlignVertical: 'center',
    fontSize: px2dp(26),
    color: colors[1101],
    marginLeft: px2dp(40),
  },
  noteContentView: {
    paddingTop: px2dp(17),
    paddingBottom: px2dp(32),
    marginHorizontal: px2dp(16),
    borderTopWidth: px2dp(1),
    borderColor: colors[1104],
  },
  dutyView: {
    // width: px2dp(492),
    flex: 1,
  },
  noteContent: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    paddingLeft: px2dp(24),
    paddingRight: px2dp(18),
    alignItems: 'center',
  },
  textinputTitle: {
    fontSize: sizes.f2,
    color: colors[1001],
    marginTop: px2dp(27),
    marginLeft: px2dp(24),
  },
  textinput: {
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors[1104],
    paddingHorizontal: px2dp(23),
    paddingVertical: px2dp(20),
    backgroundColor: '#F4F4F4',
    textAlignVertical: 'top',
    borderRadius: px2dp(10),
    marginTop: px2dp(15),
  },
  switchView: {
    marginLeft: px2dp(44),
  },
});
